import React,{useState} from 'react';
import { View, Text, Image, ScrollView, StyleSheet, TouchableOpacity,FlatList } from 'react-native';
import { Icon,Input } from 'react-native-elements';
import { MaterialCommunityIcons } from '@expo/vector-icons';
import { kwl_petData } from '@/mock/mockjs';
import { useRouter } from 'expo-router';
import { image_list3} from '@/mock/Carousel'
const Index = () => {

  const icons = [{ name: '附近', icon: 'magnify' }, { name: '猫咪', icon: 'cat' }, { name: '狗狗', icon: 'dog' }, { name: '小宠', icon: 'cat' }]
  const router = useRouter();//跳转路由
  const handleClick = (item: Number) => {
    if (item === 0) {
      router.push('/home/nearby')
    } else if (item === 1) {

    }
  }
  return (
    <View><Text>
    <ScrollView style={styles.container}>
      {/* 顶部搜索栏 */}
      <View style={styles.header}>
        <TouchableOpacity style={styles.headerButton}>
          <MaterialCommunityIcons name="magnify" size={24} color="#fff" onPress={() => router.push('/home/search')} />
        </TouchableOpacity>
        <Input placeholder="搜索" containerStyle={styles.searchContainer} onFocus={() => router.push('/home/search')} />
        <TouchableOpacity style={styles.headerButton}>
          <MaterialCommunityIcons name="cart" size={24} color="#fff" />
        </TouchableOpacity>
      </View>

      {/* 分类图标 */}
      <View style={styles.categoryContainer}>
        {icons.map((item, index) => (
          <TouchableOpacity key={index} style={styles.categoryItem}>
            <MaterialCommunityIcons name={item.icon} size={24} style={styles.categoryIcon} onPress={() => handleClick(index)} />
            <Text>{item.name}</Text>
          </TouchableOpacity>
        ))}
      </View>

      {/* 服务列表 */}
      <View style={styles.serviceContainer}>
        {['宠物洗澡', '宠物美容', '宠物寄养', '宠物疫苗', '宠物驱虫', '宠物体检', '宠物绝育', '宠物问诊'].map((item, index) => (
          <TouchableOpacity key={index} style={styles.serviceItem}>
            <MaterialCommunityIcons name="heart" size={24} style={styles.serviceIcon} />
            <Text>{item}</Text>
          </TouchableOpacity>
        ))}
      </View>

      {/* unigo宠物上门服务 */}
      <View style={styles.unigoContainer}>
        <Text style={styles.unigoText}>unigo</Text>
        <Text style={styles.unigoSubText}>宠物上门服务</Text>
      </View>

      {/* 特价和最新上架标题 */}
      <View style={styles.discount}>
        <View style={styles.flexSpaceBetween}>
          <Text>每日特价</Text>
          <Text onPress={() => router.push('/home/daily')}>更多></Text>
        </View>
      </View>
      <ScrollView horizontal showsHorizontalScrollIndicator={false} style={styles.petImageList}>
        {image_list3.data.map((pet, index) => (
          <TouchableOpacity key={index} style={styles.petItem} onPress={() => router.push(`/info?item=${encodeURIComponent(JSON.stringify(pet))}`)}>
            <Image source={{ uri: pet.image }} style={styles.petImage} />
            <Text style={styles.petName}>{pet.title}</Text>
            <Text style={styles.price}>{`¥${pet.price}`}</Text>
            {pet.isSpecialOffer && (
              <Text style={styles.originalPrice}>{`原价: ¥${pet.originalPrice}`}</Text>
            )}
          </TouchableOpacity>
        ))}
      </ScrollView>
      <View style={styles.discount}>
        <View style={styles.flexSpaceBetween}>
          <Text>最新上架</Text>
          <Text onPress={() => router.push('/home/latest')}>更多></Text>
        </View>
      </View>

      {/* 宠物图片列表 */}
      <ScrollView horizontal showsHorizontalScrollIndicator={false} style={styles.petImageList}>
        {kwl_petData.list.map((pet, index) => (
          <TouchableOpacity key={index} style={styles.petItem} onPress={() => router.push(`/info?item=${encodeURIComponent(JSON.stringify(pet))}`)}>
            <Image source={{ uri: pet.image }} style={styles.petImage} />
            <Text style={styles.petName}>{pet.name}</Text>
            <Text style={styles.price}>{`¥${pet.price}`}</Text>
            {pet.isSpecialOffer && (
              <Text style={styles.originalPrice}>{`原价: ¥${pet.originalPrice}`}</Text>
            )}
          </TouchableOpacity>
        ))}
      </ScrollView>

      {/* 精品宠物管标题 */}
      <View style={styles.discount}>
        <View style={styles.flexSpaceBetween}>
          <Text>精品宠物管</Text>
          <Text onPress={() => router.push('/home/quality')}>更多></Text>
        </View>
      </View>
      <ScrollView horizontal showsHorizontalScrollIndicator={false} style={styles.petImageList}>
        {kwl_petData.list.map((pet, index) => (
          <TouchableOpacity key={index} style={styles.petItem}>
            <Image source={{ uri: pet.image }} style={styles.petImage} />
            <Text style={styles.petName}>{pet.name}</Text>
            <Text style={styles.price}>{`¥${pet.price}`}</Text>
            {pet.isSpecialOffer && (
              <Text style={styles.originalPrice}>{`原价: ¥${pet.originalPrice}`}</Text>
            )}
          </TouchableOpacity>
        ))}
      </ScrollView>

    </ScrollView>
    

    {/* 虚拟列表 */}
    <FlatList
        data={kwl_petData.list}
        renderItem={({ item }) => (
          <View style={styles.virtualListItem}>
            <Image source={{ uri: item.image }} style={styles.smallPetImage} />
            <Text style={styles.virtualListItemText}>{item.name}</Text>
            <Text style={styles.virtualListItemPrice}>{`¥${item.price}`}</Text>
            {item.isSpecialOffer && (
              <Text style={styles.originalPrice}>{`原价: ¥${item.originalPrice}`}</Text>
            )}
          </View>
        )}
        keyExtractor={(item, index) => index.toString()}
        ItemSeparatorComponent={() => <View style={styles.separator} />}
        ListHeaderComponent={() => <Text style={styles.listTitle}>虚拟列表标题</Text>}
        showsVerticalScrollIndicator={false}
        scrollEnabled={true}
        removeClippedSubviews={false}
        getItemLayout={(data, index) => ({
          length: 80,
          offset: 80 * index,
          index,
        })}
        contentContainerStyle={styles.flatListContent}
        style={styles.flatList}
      />
    </Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
  header: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    backgroundColor: '#ff4d4f',
    padding: 10,
  },
  headerButton: {
    padding: 10,
  },
  searchContainer: {
    flex: 1,
    backgroundColor: '#fff',
    borderRadius: 5,
    marginHorizontal: 10,
    paddingHorizontal: 5,
  },
  categoryContainer: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    justifyContent: 'space-around',
    padding: 10,
    backgroundColor: '#ff4d4f',
  },
  categoryItem: {
    alignItems: 'center',
    margin: 5,
  },
  categoryIcon: {
    marginRight: 5,
  },
  serviceContainer: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    justifyContent: 'space-around',
    padding: 10,
    width: '90%',
    margin: 'auto',
  },
  serviceItem: {
    alignItems: 'center',
    margin: 20,
  },
  serviceIcon: {
    marginRight: 5,
  },
  unigoContainer: {
    alignItems: 'center',
    padding: 20,
  },
  unigoText: {
    fontSize: 24,
    fontWeight: 'bold',
  },
  unigoSubText: {
    fontSize: 14,
    color: '#888',
  },
  discount: {
    width: '90%',
    margin: 'auto',
  },
  flexSpaceBetween: {
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  petImageList: {
    flexDirection: 'row',
    flexWrap: 'nowrap',
    padding: 10,
  },
  petImageItem: {
    width: 150,
    height: 150,
    marginHorizontal: 10,
    position: 'relative', // 确保内部元素可以相对定位
  },
  petImageList: {
    flexDirection: 'row',
    flexWrap: 'nowrap',
    padding: 10,
  },
  petItem: {
    width: 150,
    height: 180,
    marginHorizontal: 10,
    backgroundColor: '#eee',
    borderRadius: 8,
    alignItems: 'center',
    justifyContent: 'center',
  },
  petImage: {
    width: '100%',
    height: '80%',
    borderRadius: 8,
  },
  petName: {
    fontSize: 10,
    fontWeight: 'bold',
    marginTop: 5,
    textAlign: 'center',
  },
  price: {
    fontSize: 14,
    color: '#ff4d4f',
    marginTop: 5,
    textAlign: 'center',
  },
  originalPrice: {
    fontSize: 12,
    color: '#888',
    textDecorationLine: 'line-through',
    marginTop: 5,
  },
  virtualListContainer: {
    marginTop: 20,
  },
  virtualListItem: {
    flexDirection: 'row',
    alignItems: 'center',
    padding: 10,
    borderBottomWidth: 1,
    borderBottomColor: '#ddd',
  },
  smallPetImage: {
    width: 60,
    height: 60,
    marginRight: 10,
    borderRadius: 8,
  },
  virtualListItemText: {
    flex: 1,
  },
  virtualListItemPrice: {
    marginLeft: 10,
  },
  separator: {
    height: 1,
    backgroundColor: '#ddd',
  },
  listTitle: {
    fontSize: 18,
    fontWeight: 'bold',
    padding: 10,
    backgroundColor: '#f4f4f4',
  },
  flatListContent: {
    flexGrow: 1,
  },
  flatList: {
    height: 300, // 设置固定高度
  },
});

export default Index;